<template>
	<view>
		<view class="page-container">
			<!-- 底层图片 -->
			<image src="/pages/Car/static/图层1@2x.png" class="bg-image" mode="widthFix" />

			<!-- 上层内容 -->
			<view class="top-content">
				<view class="navigator">维修详情</view>
				
				<!-- 核销码和二维码区域 -->
				<view class="carView qrcode-section">
					<view class="核销码">
						<text class="code-label">核销码:</text>
						<text class="code-value">WE34325V</text>
					</view>
					<view class="qrcode-container">
						<image src="/pages/maintenance/static/二维码.png" class="qrcode-img" mode="widthFix" />
					</view>
				</view>
				
				<!-- 维修信息区域 -->
				<view class="carView info-section">
					<view class="section-title">维修信息</view>
					<view class="info-item">
						<text class="info-label">维修单号:</text>
						<text class="info-value">3535252</text>
					</view>
					<view class="info-item">
						<text class="info-label">维修状态:</text>
						<text class="info-value status-active">进行中</text>
					</view>
					<view class="info-item">
						<text class="info-label">车主姓名:</text>
						<text class="info-value">张</text>
					</view>
					<view class="info-item">
						<text class="info-label">联系方式:</text>
						<text class="info-value">1993829282</text>
					</view>
					<view class="info-item">
						<text class="info-label">维修方式:</text>
						<text class="info-value">上门取车</text>
					</view>
					<view class="info-item">
						<text class="info-label">取车位置:</text>
						<text class="info-value">山阳区32号</text>
					</view>
					<view class="info-item">
						<text class="info-label">预约日期:</text>
						<text class="info-value">2022/11/10 11:00</text>
					</view>
					<view class="info-item">
						<text class="info-label">提交日期:</text>
						<text class="info-value">2022/11/08 12:34</text>
					</view>
				</view>
				
				<!-- 车辆信息区域 -->
				<view class="carView info-section">
					<view class="section-title">车辆信息</view>
					<view class="info-item">
						<text class="info-label">车辆类型:</text>
						<text class="info-value">大客车</text>
					</view>
					<view class="info-item">
						<text class="info-label">车牌号:</text>
						<text class="info-value">豫A45323</text>
					</view>
					
					<!-- 整车照片 -->
					<view class="image-group">
						<text class="info-label">整车照片:</text>
						<view class="image-container">
							<image src="/pages/maintenance/static/car01.png" class="car-img" mode="widthFix" />
						</view>
					</view>
					
					<!-- 维修部位照片 -->
					<view class="image-group">
						<text class="info-label">维修部位照片:</text>
						<view class="images-row">
							<image src="/pages/maintenance/static/car01.png" class="part-img" mode="widthFix" />
							<image src="/pages/maintenance/static/car01.png" class="part-img" mode="widthFix" />
							<image src="/pages/maintenance/static/car01.png" class="part-img" mode="widthFix" />
						</view>
					</view>
				</view>
				
				<!-- 取消订单按钮 -->
				<view class="cancel-btn-container">
					<button class="cancel-order-btn" @tap="showCancelModal">取消订单</button>
				</view>
				
			</view>
			<!-- 取消订单确认弹窗 -->
			<view class="modal-mask" v-if="showCancelModalFlag" @tap="hideCancelModal">
				<view class="modal-content" @tap.stop>
					<view class="modal-header">
						<text class="modal-title">提示</text>
					</view>
					<view class="modal-body">
						<text class="modal-text">确定要取消订单吗？</text>
					</view>
					<view class="modal-actions">
						<button class="modal-btn cancel-btn" @tap="hideCancelModal">取消</button>
						<button class="modal-btn confirm-btn" @tap="confirmCancelOrder">确认</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
		
	// 控制弹窗显示
	const showCancelModalFlag = ref(false)
	
	// 显示取消订单弹窗
	const showCancelModal = () => {
		showCancelModalFlag.value = true
	}
	
	// 隐藏取消订单弹窗
	const hideCancelModal = () => {
		showCancelModalFlag.value = false
	}
	
	// 确认取消订单
	const confirmCancelOrder = () => {
		// 这里可以添加取消订单的API调用
		console.log('取消订单')
		
		// 跳转到指定页面
		uni.navigateTo({
			url: '/pages/maintenance/maintenanceEnd/maintenanceEnd'
		})
		
		// 隐藏弹窗
		hideCancelModal()
	}
</script>

<style scoped>
	/* 父容器 */
	.page-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
	}

	/* 底层图片 */
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1;
	}

	/* 上层内容 */
	.top-content {
		position: relative;
		z-index: 2;
		box-sizing: border-box;
		padding-top: 40rpx;
	}

	.navigator {
		display: flex;
		justify-content: center;
		color: white;
		margin-bottom: 40rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.carView {
		background-color: #fff;
		margin: 30rpx 20rpx 0rpx 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}
	
	/* 核销码和二维码区域 */
	.qrcode-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 20rpx;
	}
	
	.核销码 {
		width: 100%;
		margin-bottom: 30rpx;
		text-align: center;
	}
	
	.code-label {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}
	
	.code-value {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}
	
	.qrcode-container {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}
	
	.qrcode-img {
		width: 200rpx;
		height: 200rpx;
	}
	
	/* 信息区域样式 */
	.info-section {
		display: flex;
		flex-direction: column;
	}
	
	.section-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 30rpx;
		padding-bottom: 15rpx;
		border-bottom: 2rpx solid #f1f3f4;
	}
	
	.info-item {
		display: flex;
		padding: 15rpx 0;
	}
	
	.info-item:last-child {
		border-bottom: none;
	}
	
	.info-label {
		width: 200rpx;
		font-size: 28rpx;
		color: #666;
	}
	
	.info-value {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}
	
	.status-active {
		color: #1677ff;
		font-weight: 500;
	}
	
	/* 图片展示区域 */
	.image-group {
		display: flex;
		flex-direction: column;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #f1f3f4;
	}
	
	.image-group:last-child {
		border-bottom: none;
	}
	
	.image-container {
		margin-top: 15rpx;
	}
	
	.images-row {
		display: flex;
		gap: 15rpx;
		margin-top: 15rpx;
	}
	
	.car-img {
		width: 300rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}
	
	.part-img {
		flex: 1;
		height: 150rpx;
		border-radius: 10rpx;
	}
	
	/* 取消订单按钮 */
	.cancel-btn-container {
		display: flex;
		justify-content: flex-end;
		margin: 20rpx 0;
		background-color: #fff;
	}
	
	.cancel-order-btn {
		width: 30%;
		margin: 10rpx;
		background-color: #1677ff;
		color: #fff;
		font-size: 32rpx;
		border-radius: 50rpx;
		border: none;
	}
	
	/* 弹窗样式 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}
	
	.modal-content {
		background: white;
		border-radius: 20rpx;
		width: 500rpx;
		padding: 40rpx;
		box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2);
	}
	
	.modal-header {
		text-align: center;
		margin-bottom: 30rpx;
	}
	
	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.modal-body {
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	.modal-text {
		font-size: 28rpx;
		color: #666;
	}
	
	.modal-actions {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}
	
	.modal-btn {
		flex: 1;
		padding: 0 20rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		border: none;
	}
	
	.modal-btn.cancel-btn {
		background: #f0f0f0;
		color: #666;
	}
	
	.modal-btn.confirm-btn {
		background: #1677ff;
		color: white;
	}
</style>